import React, { useEffect, useState } from 'react'

import { Input, Button, message } from 'antd';
import { UserOutline, UnlockOutline } from 'antd-mobile-icons'


import styles from './index.module.css'

//网络请求
import { addUser } from '../../../utils/axiosRequest/api'

function Adduser() {
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    const [userName, setUserName] = useState('')
    const [userPwd, setUserPwd] = useState('')
    const [isLoadState, seLoadState] = useState(false)


    //[]空数组相当于componentDidMount
    useEffect(() => {
        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function onChangeUserName(val) {
        let userName = val.target.value
        setUserName(userName);
    }

    function onChangeUserPwd(val) {
        let userPwd = val.target.value
        setUserPwd(userPwd);
    }

    function clickLogin() {
        seLoadState(true)
        const params = new Map()
        params.set('userName', userName)
        params.set('userPwd', userPwd)
        addUser(params)
            .then(response => {
                seLoadState(false)
                const data = response.data
                if (data.code === 1000) {
                    setUserName('');
                    setUserPwd('');
                    messageApi.open({ type: 'error', content: "创建用户成功" });
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                seLoadState(false)
                messageApi.open({ type: 'error', content: error.message });
            });
    }


    return (
        <div className={styles.root}>
            {contextHolder}
            <div className={styles.content}>
                <Input style={{ '--font-size': '18px' }} value={userName} onChange={onChangeUserName} maxLength='10'
                    placeholder='请输入账号...' allowClear={true} prefix={<UserOutline />} size="large" />
                <Input style={{ 'marginTop': '25px', '--font-size': '18px' }} value={userPwd} onChange={onChangeUserPwd}
                    type={'password'} maxLength='20' allowClear={true} placeholder='请输入密码...' prefix={<UnlockOutline />} size="large" />
                <Button loading={isLoadState} className={styles.create_button} onClick={clickLogin} type="primary" size={'large'}>创建账号</Button>
            </div>
        </div>
    )
}

export default Adduser;
